import { memo, useEffect, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { Carousel, Grid, Spin  } from '@arco-design/web-react';
import {useNavigate } from "react-router-dom"
import { Container, CardAlbum, CardAlbums } from '@/components/web-react'
import { getBanner } from '@/apis/demo';

interface IProps {
  children?: ReactNode
}

const { GridItem } = Grid;
const imageSrc = [
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp',
];

const Recommend: FC<IProps> = () => {
  const navigate = useNavigate()
  const [banners, setBanners] = useState<string[]>(imageSrc)
  const [loading, setLoading] = useState(false)

  async function getBanberHandler() {
    setLoading(true)
    try {
      const res = await getBanner()
      const data = res.data.map((item: any) => item.imgUrl)
      setBanners(data)
      // localStorage.setItem('banners', data)
    } catch (error) {
      console.log(error)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {

    getBanberHandler()
  }, [])

  return (
    <div className={"w-full relative"}>
      <Container suffix=' ' className='rounded'>
        <div className='w-full h-[240px] flex gap-2'>
          <div className='w-1/5 h-full flex justify-center items-center'>
            <CardAlbums
              name='一曲青衣·浮生梦'
              cover='https://picsum.photos/seed/picsum/200/300'
              clickPlay={()=>{navigate('/ruom/playlist-detail')}}
            >
            </CardAlbums>
          </div>
          <Carousel
            autoPlay
            animation='fade'
            style={{ width: '100%', height: 240, position: 'relative' }}
          >
            {
              loading? <Spin /> : banners.map((src, index) => (
                <div className={"bg-white/10 rounded relative "} key={index}>
                  <img
                    src={src}
                    style={{ width: '100%' }}
                    className={"absolute top-0 left-0 z-10 w-full h-full object-cover blur-xl"}
                  />
                  <div className={"w-full h-[240px] rounded box-border absolute top-0 left-0 z-20 bg-black/30 bg-no-repeat backdrop-blur-3xl"}></div>
                  <img
                    src={src}
                    className={"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-30 w-[560px] h-full object-cover"}
                  />
                </div>
              ))}
          </Carousel>
        </div>
      </Container>

      <Container title="本周排行">
        <Grid cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }} colGap={12} rowGap={16}>
            <GridItem className='demo-item'>
              <CardAlbum
                album ="周杰伦 - 七里香"
                cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
                artist="周杰伦"
                releaseDate="2017-03-01"
                onPlay={() => {console.log('play')}}
                onClick={() => {
                  navigate('/ruom/playlist-detail')
                }}
                onClickArtist={() => {navigate('/ruom/singer-detail')}}
              />
            </GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
        </Grid>
      </Container>

      <Container title="热门歌单">
      <Grid cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }} colGap={12} rowGap={16}>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
        </Grid>
      </Container>

      <Container title="热门歌手">
      <Grid cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }} colGap={12} rowGap={16}>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
        </Grid>
      </Container>

      <Container title="新碟上架">
      <Grid cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }} colGap={12} rowGap={16}>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
            <GridItem className='demo-item'><CardAlbum
              album ="周杰伦 - 七里香"
              cover="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
              artist="周杰伦"
              releaseDate="2017-03-01"
              onPlay={() => {console.log('play')}}
              onClick={() => {
                navigate('/ruom/playlist-detail')
              }}
              onClickArtist={() => {navigate('/ruom/singer-detail')}}
            /></GridItem>
        </Grid>
      </Container>

    </div>
  )
}

export default memo(Recommend)
